<template>
	<view class="count-down">
		<view class="wait-pay" v-if="isshow && type=='line'">
			<view @click="$c.a('index/order')">
				<u-count-down :time="remainingTime" format="HH:mm:ss" @change="onChange">
					<view>您有未付款订单，剩余 {{ displayTime }} 关闭订单</view>
				</u-count-down>
			</view>
			<view>
				<u-icon name="close-circle" size="22" color="#ff9900" @click="isshow=false"></u-icon>
			</view>
		</view>
		
		<view v-if="isshow && type=='default'">
			<u-count-down :time="remainingTime" format="HH:mm:ss" @change="onChange">
				<view class="time">待付款，剩余 {{ displayTime }}</view>
			</u-count-down>
		</view>
		
		<view v-if="type=='order'">
			<u-count-down :time="remainingTime" format="HH:mm:ss" @change="onChange">
				<view>待付款<text v-if="isshow" class="order-time">{{ displayTime }}</text></view>
			</u-count-down>
		</view>
		
		<u-modal
			:show="isshow && type=='pop'"
			title="订单提醒"
			:showCancelButton="true"
			confirmText="去付款"
			cancelText="取消"
			@confirm="$c.a('index/order',{i:1})"
			@cancel="isshow=false"
		>
			<view class="unread">
				<view>您有<text class="order-time">{{ order_num }}</text>张未付款订单，将在</view>
				<u-count-down :time="remainingTime" format="HH:mm:ss" @change="onChange">
					<view><text class="order-time">{{ displayTime }}</text> 后自动关闭订单</view>
				</u-count-down>
			</view>
		</u-modal>
	</view>
</template>

<script>
export default {
	props: {
		type: {
			type: [String],
			default: 'default'
		},
		closetime: {
			type: [String],
			default: ''
		},
		order_num:{
			type: [Number],
			default: 0
		}
	},
	data() {
		return {
			isshow: false,
			timeData: {},
			remainingTime: 0
		}
	},
	computed: {
		displayTime() {
			const { days, hours, minutes, seconds } = this.timeData;
			if (days > 0) {
				return `${days}天 ${hours}:${minutes}:${seconds}`;
			} else {
				return `${hours}:${minutes}:${seconds}`;
			}
		}
	},
	mounted() {
		if (this.closetime) {
			const targetDate = new Date(this.closetime).getTime();
			const now = new Date().getTime();
			const distance = targetDate - now;

			if (!isNaN(targetDate) && distance > 0) {
				this.remainingTime = distance;
				this.isshow = true;
			} else {
				this.isshow = false;
			}
		} else {
			this.isshow = false;
		}
	},
	methods: {
		onChange(e) {
			this.timeData = e;
		}
	}
}
</script>

<style lang="scss">
	.wait-pay{
		font-size: 24rpx;
		color:#ff9900;
		padding: 10px;
		border-radius: 15px;
		margin: 10px 0;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		background-color:#fdf6ec;
		margin: 20rpx;
	}
	.time{
		color:#DE2F2F;
		text-align: center;
		font-size: 24rpx;
	}
	.order-time{
		color:#DE2F2F;
		font-size: 28rpx;
		margin-left: 10rpx;
		margin-right: 10rpx;
	}
	.unread{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
</style>